<template>
	<view>
		<u-navbar :titleWidth="'80%'" :titleStyle="{fontSize: '14px', color: '#ffffff'}" bgColor="transparent"
			:leftIconColor="'#ffffff'">
			<view class="u-nav-slot" slot="left">
				<u-icon v-if="userInfo.is_sale" name="arrow-left" :color="'#ffffff'" size="20px" @click="leftClick" />
				<u-icon v-if="!userInfo.is_sale" name="home-fill" :color="'#ffffff'" size="20px" @click="goHome" />
			</view>
			<view v-if="data.is_expires && !userInfo.is_sale" class="u-nav-slot" slot="right">
				<view class="Grid Grid--justifyCenter Grid--center" style="flex-direction: column;" @click="goFeedback">
					<view style="color: #ffffff; font-size: 12px;">投诉</view>
				</view>
			</view>
		</u-navbar>
		<swiper :style="'width: '+ windowWidth +'px; height: '+ windowHeight +'px; background-color: #000000;'"
			:vertical="true" :current="current" :disable-touch="true" :indicator-dots="false" :duration="duration">
			<swiper-item @touchstart="touchStart" @touchend="touchEnd" @touchmove="touchMove">
				<div class="prism-player" id="player-con"></div>
			</swiper-item>
		</swiper>
		<cover-view
			style="position: fixed; top: 50px; left: 50%; margin-left: -45%; width: 90%; background: rgba(0, 0, 0, .16); border-radius: 5px;">
			<cover-view v-if="data.matchInfo" class="Grid Grid--justifySpaceBetween relative text-sm"
				style="padding-top: 10px;">
				<cover-view class="Grid-cell text-center text-white">{{isObjData&&data.matchInfo.competition_info.name}}
					{{isObjData&&data.matchInfo.match_time.substring(5,16)}}
				</cover-view>
			</cover-view>
			<view v-else class="Grid Grid--justifySpaceBetween relative text-xs" style="padding-top: 10px;">
				<view class="Grid-cell text-center text-white">{{data.match_date}}</view>
			</view>
			<cover-view v-if="data.matchInfo" class="Grid Grid--1of2 Grid--center" style="padding: 10px 20px;">
				<cover-view class="Grid Grid--center Grid--justifyCenter Grid-cell"
					style="background: rgba(255, 255, 255, .54); border-radius: 20px; padding: 5px 0;">
					<cover-image :src="isObjData&&data.matchInfo.home_team_info.logo"
						style="width: 15px; height: 15px;"></cover-image>
					<cover-view
						style="padding: 0 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 120px; color: #222222; font-size: 12px;">
						{{isObjData&&data.matchInfo.home_team_info.team_name}}
					</cover-view>
				</cover-view>
				<cover-view class="Grid Grid--center Grid--justifyCenter Grid-cell"
					style="background: rgba(255, 255, 255, .54); border-radius: 20px;  padding: 5px 0;">
					<cover-image :src="isObjData&&data.matchInfo.away_team_info.logo"
						style="width: 15px; height: 15px;"></cover-image>
					<cover-view
						style="padding: 0 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 120px; color: #222222;  font-size: 12px;">
						{{isObjData&&data.matchInfo.away_team_info.team_name}}
					</cover-view>
				</cover-view>
				<cover-view
					style="position: absolute; width: 18px; height: 18px; line-height: 18px; border-radius: 50%; text-align: center; color: #ffffff; background-color: #ED5454; font-size: 12px; left: 50%; margin-left: -9px; bottom: 13px;">
					<cover-view style="scale: .8; margin-top: 2px;">VS</cover-view>
				</cover-view>
			</cover-view>
			<cover-view v-else class="Grid Grid--justifyCenter text-sm Grid--center text-white"
				style="padding: 0 20px;">
				{{data.match_nick}}
			</cover-view>
		</cover-view>
		<!-- bottom: !userInfo.is_sale && data.market_ids && data.market_ids.includes(5) && data.marketing_tools[5].status ? '120px' : '80px' -->
		<cover-view
			:style="{'position': 'fixed', left: 0, width: '100%', bottom: '94px', background: 'linear-gradient( 180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.2) 50%, rgba(0,0,0,0) 100%)', height: 'auto', 'text-shadow': 'rgba(0, 0, 0, .4) 3px 4px 5px'}">
			<cover-view style="position: relative; top: 0; width: 90%; left: 50%; margin-left: -45%;">
				<cover-view class="Media Media--justifyCenter Media--alignCenter">
					<cover-image v-if="data.author" shape="circle" :showLoading="true" :src="data.author.avatar_url"
						style="width: 50px; height: 50px; border-radius: 50%; overflow: hidden;" @click.native.stop="goHome"></cover-image>
					<cover-view class="Media-body" style="padding-left: 12px;">
						<cover-view class="Grid Grid--center" style="color: #FFFFFF;" @click.native.stop="goHome">
							<cover-view class="Grid-cell">
								<cover-view class="text-base">{{data&&data.author&&data.author.nickname}}</cover-view>
								<cover-view class="text-xs"
									v-if="!data.draft_status">{{data.release_time?data.release_time.substring(0,10):''}}&nbsp;&nbsp;
									</cover-view>
							</cover-view>
							<cover-view>
								<cover-view v-if="data.market_ids && data.market_ids.includes(6) && data.category_ids[0] == 3" class="Grid Grid--center Grid--justifyCenter text-xs" style="background: rgba(0, 0, 0, .4); border-radius: 2px; padding: 2px 4px;" @click.native.stop="isKyb = true">
									<cover-image style="width: 18px; height: 18px;" src="https://code-app.oss-cn-beijing.aliyuncs.com/other/41.png"></cover-image>
									<text>柯伊伯大数据分析</text>
									<u-icon name="arrow-right" color="#ffffff" size="12"></u-icon>
								</cover-view>
								<cover-view class="Grid Grid--justifyFlexEnd" style="padding: 5px 0;">
									<cover-view class="Grid Grid--center" v-if="!data.draft_status">
										<u-icon name="eye-fill" color="#ffffff" size="16" style="padding: 0 4px;"></u-icon>
										<text class="text-xs">{{data.hits_show}}</text>
									</cover-view>
									<u-button v-if="data.author.status == 3 || data.author.status == 4" type="warning"
										shape="circle" @click.native.stop="handleSetFocus()"
										style="width: 60px; font-size: 12px; height: 24px; margin: 5px;">关注</u-button>
								</cover-view>
							</cover-view>
						</cover-view>
					</cover-view>
				</cover-view>
				<cover-view class="Grid Grid--center"
					style="color: #FFFFFF; font-size: 14px; width: 100%; padding-top: 8px; padding-bottom: 5px;">
					<!-- <cover-view :style="{'width': '100%', 'position': 'relative', 'white-space': 'normal', 'line-height': '24px', 'font-size': '14px'}">
						<div class="wrapper">
							<div :class="['text', {'checked': isChecked}]">
								<label class="btn" for="exp1" @click="isChecked = !isChecked"></label>
								<cover-view v-if="!data.draft_status&&data.is_expires" style="display: inline; background: rgba(0, 0, 0, .3); font-size: 12px; border-radius: 2px; padding: 2px 4px; color: #C6C6C6; margin-right: 5px;">已过期</cover-view>
								<cover-view v-if="data.category_ids && data.category_ids[0]==3" style="display: inline; background: rgba(0, 0, 0, .3); font-size: 12px; border-radius: 2px; padding: 2px 4px; color: #52B36D; margin-right: 5px;">足球</cover-view>
								<cover-view v-if="data.category_ids && data.category_ids[0]==4" style="display: inline; background: rgba(0, 0, 0, .3); font-size: 12px; border-radius: 2px; padding: 2px 4px; color: rgb(62, 165, 233); margin-right: 5px;">篮球</cover-view>
								<text>{{data.title}}</text>
							</div>
						</div>
						<mp-html container-style="padding: 0;" :content="data.description" lazy-load scroll-table
							selectable use-anchor />
					</cover-view> -->
					<cover-view :style="{'width': '100%', 'position': 'relative', 'white-space': 'normal', 'line-height': '24px', 'font-size': '14px', 'height': isBoxView ? 'auto' : '48px'}">
											<cover-view v-if="!data.draft_status&&data.is_expires" style="display: inline; background: rgba(0, 0, 0, .3); font-size: 12px; border-radius: 2px; padding: 2px 4px; color: #C6C6C6; margin-right: 5px;">已过期</cover-view>
											<cover-view v-if="data.category_ids && data.category_ids[0]==3" style="display: inline; background: rgba(0, 0, 0, .3); font-size: 12px; border-radius: 2px; padding: 2px 4px; color: #52B36D; margin-right: 5px;">足球</cover-view>
											<cover-view v-if="data.category_ids && data.category_ids[0]==4" style="display: inline; background: rgba(0, 0, 0, .3); font-size: 12px; border-radius: 2px; padding: 2px 4px; color: rgb(62, 165, 233); margin-right: 5px;">篮球</cover-view>
											<text>{{data.title}}</text>
											<mp-html container-style="padding: 0;" :content="data.description" lazy-load scroll-table
												selectable use-anchor />
											<text style="position: absolute; right: 0; bottom: 0; padding: 2px 4px; background: rgba(0, 0, 0, .4); padding: 0 4px; border-radius: 2px; font-size: 12px;" @click.native.stop="isBoxView = !isBoxView">{{isBoxView ? '收起' : '展开'}}</text>
										</cover-view>
				</cover-view>
				<cover-view v-if="!userInfo.is_sale && !data.is_subscribe" class="Media Media--justifyCenter Media--alignCenter" style="background: rgba(0, 0, 0, .3); padding: 10px; border-radius: 10px; margin-top: 10px; margin-bottom: 10px; color: #ffffff;">
					<cover-view class="Media-body Grid Grid--center" style="padding-left: 12px;">
						<cover-view class="Grid-cell">
							<cover-view class="text-sm">{{data.wechat_title}}公众号</cover-view>
							<cover-view class="text-xs">专业的角度，具体的分析</cover-view>
						</cover-view>
						<cover-view>
							<cover-view @click.native.stop="handleGetApiCode()" style="width: 60px; text-align: center; font-size: 12px; height: 24px; line-height: 24px; border-radius: 4px; color: #E52727; border: 1px solid #E52727; margin-right: 10px;">关注</cover-view>
						</cover-view>
					</cover-view>
				</cover-view>
				<cover-view class="Grid Grid--center" style="color: #FFFFFF; font-size: 14px; width: 100%; padding-bottom: 5px;">
					<cover-view v-if="data.market_ids && data.market_ids.length && !userInfo.is_sale"
						class="Grid Grid--center text-xs">
						<!-- 若当前用户具备新人首免资格且当前方案启用新人首免，那么仅展示新人首免最优权益 -->
						<cover-view style="padding-bottom: 5px; margin-right: 5px;"
							v-for="(i, index) in data.market_ids.filter(i => data.market_ids.includes(4) && !userInfo.orders ? i == 4 : (i != 5 && i != 1 && i != 4 && i != 6))"
							:key="index">
							<cover-view style="background: #FF8D40; border-radius: 2px; padding: 2px 4px; text-shadow: none;">{{setting.market[i].title}}</cover-view>
						</cover-view>
					</cover-view>
					<cover-view v-if="data.market_ids && data.market_ids.length && userInfo.is_sale"
						class="Grid Grid--center text-xs">
						<cover-view style="padding-bottom: 5px; margin-right: 5px;"
							v-for="(i, index) in data.market_ids.filter(i => (i != 5 && i != 1 && i != 6))" :key="index">
							<cover-view style="background: #FF8D40; border-radius: 2px; padding: 2px 4px; text-shadow: none;">{{setting.market[i].title}}</cover-view>
						</cover-view>
					</cover-view>
				</cover-view>
				<view v-if="!data.pay_status && data.market_ids.includes(5)" class="Grid Grid--center" style="background: #ED5454; border-radius: 2px; padding: 4px 0; font-size: 14px;">
					<view class="Grid Grid--center" style="display: inline-block; color: #e45656; margin: 0 auto;">
						<text style="padding: 2px 4px;color: #FFF63A; font-weight: 600; text-shadow: none;">{{data.marketing_tools[5].status ? '限时秒杀' : '秒杀结束'}}</text>
						<u-count-down v-if="data.market_ids.includes(5) && data.marketing_tools[5].status && !(data.market_ids.includes(4) && !userInfo.orders) && !data.pay_status" :time="data.marketing_tools[5].secs * 1000" format="DD:HH:mm:ss" autoStart millisecond
							@change="onChange" style="display: inline-block; text-shadow: none;">
							<view class="time">
								<view class="time__custom" v-if="timeData.days">
									<text class="time__custom__item">{{ timeData.days > 9 ? timeData.days : '0' + timeData.days }}</text>
								</view>
								<text v-if="timeData.days" class="time__doc">天</text>
								<view class="time__custom">
									<text class="time__custom__item">{{ timeData.hours > 9 ? timeData.hours : '0' + timeData.hours }}</text>
								</view>
								<text class="time__doc">:</text>
								<view class="time__custom">
									<text class="time__custom__item">{{ timeData.minutes > 9 ? timeData.minutes : '0' + timeData.minutes }}</text>
								</view>
								<text class="time__doc">:</text>
								<view class="time__custom">
									<text class="time__custom__item">{{ timeData.seconds > 9 ? timeData.seconds : '0' + timeData.seconds }}</text>
								</view>
							</view>
						</u-count-down>
						<u-count-down v-if="userInfo.is_sale && data.market_ids.includes(5) && data.marketing_tools[5].status && !data.pay_status" :time="data.marketing_tools[5].secs * 1000" format="DD:HH:mm:ss" autoStart millisecond
							@change="onChange" style="display: inline-block; text-shadow: none;">
							<view class="time">
								<view class="time__custom" v-if="timeData.days">
									<text class="time__custom__item">{{ timeData.days > 9 ? timeData.days : '0' + timeData.days }}</text>
								</view>
								<text v-if="timeData.days" class="time__doc">天</text>
								<view class="time__custom">
									<text class="time__custom__item">{{ timeData.hours > 9 ? timeData.hours : '0' + timeData.hours }}</text>
								</view>
								<text class="time__doc">:</text>
								<view class="time__custom">
									<text class="time__custom__item">{{ timeData.minutes > 9 ? timeData.minutes : '0' + timeData.minutes }}</text>
								</view>
								<text class="time__doc">:</text>
								<view class="time__custom">
									<text class="time__custom__item">{{ timeData.seconds > 9 ? timeData.seconds : '0' + timeData.seconds }}</text>
								</view>
							</view>
						</u-count-down>
					</view>
				</view>
			</cover-view>
		</cover-view>
		<cover-view v-if="isKyb" class="box-mask-layer">
			<cover-view style="position: absolute; width: 90%; top: 20%; left: 50%; margin-left: -45%; background-color: #FFFFFF; border-radius: 10px; text-align: center; z-index: 999;">
				<cover-view style="position: absolute; right: 10px; top: 10px; padding: 10px;" @click.native.stop="isKyb = false">
					<u-icon name="close" color="#BBB9B9" size="24"></u-icon>
				</cover-view>
				<cover-view style="padding: 20px 0;">
					<cover-view style="font-weight: bold; font-size: 18px; margin-bottom: 20px;">柯伊伯大数据分析</cover-view>
					<radar-chart v-if="data.market_ids && data.market_ids.includes(6)" :data="data"></radar-chart>
				</cover-view>
			</cover-view>
		</cover-view>
		
		<u-overlay :show="code ? true : false" @click="code = ''">
			<view class="Grid Grid--center Grid--justifyCenter">
				<image style="width: 200px; height: 200px; margin-top: 20%;" mode="widthFix" :src="code"></image>
			</view>
			<view class="Grid text-base text-center text-white Grid--center Grid--justifyCenter"
				style="padding: 10px 0;">长按识别关注公众号</view>
		</u-overlay>
	</view>
</template>

<script>
	import {
		mapState,
	} from "vuex";
	import {
		parseQuery
	} from '@/utils/index.js'
	import radarChart from './radar-chart.vue'
	import {
		BASEURL
	} from '@/constant/index.js'
	import {
		setFocus,
		getApiCode
	} from '@/service/index'
	
	export default {
		name: "details-video",
		props: {
			data: {
				type: Object,
				default: () => ({})
			}
		},
		data() {
			return {
				isChecked: false,
				player: null,
				windowWidth: 0,
				windowHeight: 0,
				current: 0,
				duration: 500,
				startX: 0,
				marketIconMap: {
					1: 'gift', // 留资优惠
					2: 'red-packet', // 不中包退
					3: 'coupon', // 买一送一
					4: 'gift', // 新人首免
					5: 'clock', // 定时秒杀
				},
				isBoxView: false,
				isKyb: false,
				timeData: {},
				code: ''
			}
		},
		computed: {
			...mapState({
				userInfo: state => state.login.userInfo,
				setting: state => state.login.setting
			}),
			isObjData() {
				return this.data.matchInfo && this.data.matchInfo.competition_info
			}
		},
		components: {
			radarChart
		},
		mounted() {
			this.windowWidth = uni.getSystemInfoSync().windowWidth
			this.windowHeight = uni.getSystemInfoSync().windowHeight
			this.$nextTick(() => {
				this.onAliplayerInit()
			})
		},
		methods: {
			onAliplayerInit() {
				let self = this
				const script = document.createElement('script');
				// 换成你自己的地址.
				script.src = 'https://code-app.oss-cn-beijing.aliyuncs.com/js/aliplayercomponents-1.1.4.min.js';
				let domain = window.location.host.split('.')[1]+'.' + window.location.host.split('.')[2]
				script.onload = () => {
					self.player = new Aliplayer({
						license: {
							domain: domain, // 申请 License 时填写的域名
							key: "pPON6Dhyx4FR1JaXb3312b6c393884243a16fb908ed501aae" // 申请成功后，在控制台可以看到 License Key
						},
						"id": "player-con", // 播放器外层容器的DOM元素ID。
						"vid": self.data.vid, // 媒体转码服务的媒体ID。
						"playauth": self.data.play_auth,
						// source: 'https://mp-bdb24c6d-8c19-4f80-8e7e-c9c9f037f131.cdn.bspapp.com/dzq100.mp4',
						// source: test,
						// "qualitySort": "asc",
						// "format": "mp4",
						// "mediaType": "video",
						"width": "100%",
						// "autoSize": "height",
						"height": `100%`,
						"cover": self.data.vid_img || null, // 播放器默认封面图片，请填写正确的图片URL地址。需要autoplay值为false时，才生效。
						"autoplay": false, // 播放器是否自动播放，在移动端autoplay属性会失效。
						"isLive": false, // 播放内容是否为直播，直播时会禁止用户拖动进度条。默认值为false，播放直播流时需要设置为true。
						"autoplayPolicy": { // 播放器自适应静音自动播放策略。仅当autoplay设置为true时，本属性生效
							fallbackToMute: true, // 有声自动播放失败后，是否降级为静音自动播放，默认为false
							showUnmuteBtn: true, // 静音自动播放时，是否居中显示静音大按钮，默认为true
						},
						"rePlay": false, // 播放器自动循环播放。
						// "playsinline": true, // H5是否内置播放，有些Android浏览器不起作用。
						// "preload": true, // 播放器自动加载，目前仅H5模式可用。
						"controlBarVisibility": "always", // 控制面板的实现 click：单击播放器区域。 hover（默认值）：移动到播放器区域。 always：控制面板一直显示。 never：隐藏整个控制面板。
						"useH5Prism": true, // 指定使用H5播放器。
						// "showBarTime": 1000, // 控制栏自动隐藏时间，单位：毫秒。
						// "watchStartTime": self.data.pay_status == 1 ? (self.data.free_duration * 1) : 0,
						"watchStartTime": 0,
						"clickPause": true, // 点击视频画面进行暂停或播放。
						"disablePip": true, // 隐藏浏览器自带的画中画按钮。
						// "skinLayout": [],
						"skinLayoutIgnore": ['controlBar.fullScreenButton', 'controlBar.subtitle',
							'controlBar.setting', 'controlBar.volume', 'controlBar.playButton',
							'controlBar.timeDisplay'
						],
						"components": self.userInfo.is_sale ? [] : self.data.pay_status == 1 ? [] : [{
							name: 'PreviewVodComponent',
							type: AliPlayerComponent.PreviewVodComponent,
							/**
							 * 试看组件共有三个参数: previewDuration, previewEndHtml, previewBarHtml
							 * previewDuration: 试看时长, 单位为秒, 如果不需要开启试看的话, 设置为0, 当开启会员或购买之后设置为0!
							 * previewEndHtml: 试看结束之后, 出现在播放器中间的 Dom 字符串或者父节点的 '#' + id, 默认为 null
							 * previewBarHtml: 播放器左下角, 提示试看时长之后的 Dom 字符串或者父节点的 '#' + id, 同样可自定义样式, 默认为 null
							 * tips: previewEndHtml, previewBarHtml 可以像例子中的那样, <script type="text/template" id="endPreviewTemplate"> 在 script 标签中插入html
							 * tips: previewEndHtml, previewBarHtml 也可以直接使用Dom字符串, 推荐使用 es6 的模板字符串可以很方便地插入Dom字符串
							 */
							args: [self.data.free_duration * 1, `
								<div id='endPreviewTemplate' style='position: fixed; top: 0; left: 0; right: 0; bottom: 0; display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; align-items: center; justify-content: center; z-index: 10001'>
									<div style="position: relative;">
										<div style='font-size: 22px; color: #FFFFFF;'>付费解锁查看完整观点</div>
										<div class='to_replay' style='width: 120px; border-radius: 20px; border: 1px solid #FFFFFF; text-align: center; font-size: 18px; color: #FFFFFF; padding: 5px 0; margin: 20px auto;'>重新试看</div>
									</div>
								</div>
							`,
							(!self.data.draft_status&&self.data.is_expires) ? `该方案已过期` : `<a href="javascript:void(0)" class="vip-join" style='color: #ED5454'>立即解锁</a>观看完整视频`
							]
						}],
						// <img src='https://code-app.oss-cn-beijing.aliyuncs.com/other/30.png' style='width: 78px; height: 205px; position: absolute; right: 0; top: 100px;' />
					}, function(player) {
						console.log(player);
						const to_replay = document.querySelector('.to_replay')
						to_replay.addEventListener('click', function() {
							player.getComponent('PreviewVodComponent').closePreviewLayer()
							player.replay()
						})
						const vip_join = document.querySelector('.vip-join')
						vip_join.addEventListener('click', function() {
							self.$emit('handlePay')
						})
					});
				};
				script.onerror = () => {
					console.error('js文件加载失败!');
				};
				document.head.appendChild(script);
			},
			goFeedback() {
				uni.navigateTo({
					url: `/pages/user/feedback/feedback?appid=${this.userInfo.appid}&id=${this.data.content_id}&title=${this.data.title}`
				})
			},
			leftClick() {
				uni.navigateBack({});
			},
			goHome() {
				const {
					appid
				} = parseQuery()

				let http = `${window.location.origin}/user/#/?appid=${appid}&other=${new Date().getTime()}`
				window.location.href = http
			},
			touchStart(e) {
				if (e.touches.length == 1) {
					this.startX = e.touches[0].clientX;
					console.log(this.startX)
				}
			},
			touchEnd(e) {
				if (e.changedTouches.length == 1) {
					var endX = e.changedTouches[0].clientX;
					let diff = endX - this.startX;
					if (Math.abs(diff) > 100) {
						if (diff > 0) {
							//左滑
							console.log("左滑")
						} else {
							//右滑
							console.log("右滑")
						}
					}
				}
			},
			touchMove(e) {
				if (e.changedTouches.length == 1) {
					var endX = e.changedTouches[0].clientX;
					let diff = endX - this.startX;
					if (diff > 0) {
						//左滑
						// console.log("左滑")
						this.player.seek(this.player.getCurrentTime() + 0.5)
					} else {
						//右滑
						// console.log("右滑")
						this.player.seek(this.player.getCurrentTime() - 0.5)
					}
				}
			},
			onChange(e) {
				this.timeData = e
			},
			async handleSetFocus(status) {
				const result = await setFocus({
					user_id: this.data.author.user_id,
					is_push: 1,
					status: 1
				})
				this.getWzDetails()
				setTimeout(() => {
					uni.showToast({
						title: '关注成功,新方案将即时推送~',
						icon: 'none'
					})
				}, 500)
			},
			handleGetApiCode() {
				let params = {
					content_id: this.data.content_id,
					wechat_id: this.data.wechat_id
				}
				getApiCode(params).then(res => {
					if (res.code == 200) {
						this.code = BASEURL + '/' + res.data.qrcode_url
						console.log(this.code)
					}
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	::v-deep .prism-player .prism-progress {
		bottom: 10px !important;
	}

	::v-deep .preview-vod-component .preview-component-tip {
		position: fixed !important;
		bottom: 72px !important;
		left: 5px !important;
		z-index: 10000 !important;
	}

	::v-deep .prism-player .prism-progress .prism-progress-played {
		background: linear-gradient(110deg, #FFB34F 0%, #EA2727 100%) !important;
	}

	::v-deep .prism-player .prism-progress-hover .prism-progress-cursor {
		display: none !important;
	}

	::v-deep .prism-player .prism-controlbar .prism-controlbar-bg {
		background: transparent !important;
	}

	::v-deep .prism-player .prism-controlbar {
		position: fixed !important;
		bottom: 52px !important;
		z-index: 9999 !important;
		width: 100% !important;
	}
	// ::v-deep uni-cover-view .uni-cover-view {
	// 	flex-wrap: nowrap !important;
	// }
	::v-deep .prism-player .prism-big-play-btn {
		left: 50% !important;
		bottom: 50% !important;
		margin-left: -32px !important;
	}
	::v-deep .preview-vod-component .preview-vod-close {
		display: none !important;
	}
	
	.time {
		@include flex;
		align-items: center;
	
		&__custom {
			// margin-top: 4px;
			// width: 22px;
			// height: 22px;
			// background-color: $u-primary;
			border-radius: 4px;
			/* #ifndef APP-NVUE */
			display: flex;
			/* #endif */
			justify-content: center;
			align-items: center;
			background: #fff;
			color: #ED5454;
			padding: 0 2px;
	
			&__item {
				// color: #fff;
				color: #ED5454;
				font-size: 14px;
				text-align: center;
			}
		}
	
		&__doc {
			color: #fff;
			padding: 0px 4px;
		}
		
		&__item {
			color: #606266;
			font-size: 15px;
			margin-right: 4px;
		}
	}


.wrapper {
  display: flex;
  width: 100%;
  overflow: hidden;
}
.text {
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: justify;
  position: relative;
  line-height: 1.5;
  max-height: 3em;
  transition: .3s max-height;
}
.text::before {
  content: '';
  height: calc(100% - 18px);
  float: right;
}
.text::after {
  content: '';
  width: 999vw;
  height: 999vw;
  position: absolute;
  box-shadow: inset calc(100px - 999vw) calc(30px - 999vw) 0 0 #fff;
    margin-left: -100px;
}
.btn{
  position: relative;
  float: right;
  clear: both;
  margin-left: 14px;
  font-size: 14px;
  border-radius: 4px;
  color:  #fff;
  cursor: pointer;
	padding: 2px 4px;
	background: rgba(0, 0, 0, .4);
	padding: 0 4px;
	border-radius: 2px;
	font-size: 12px;
}
.btn::after{
  content:'展开'
}
.btn::before{
  content: '...';
  position: absolute;
  left: -5px;
  color: #fff;
  transform: translateX(-100%)
}
.text.checked {
	max-height: none;
}
.text.checked::after{
	visibility: hidden;
}
.text.checked .btn::after{
	content:'收起'
}
.text.checked .btn::before{
	content:''
}
</style>